<script setup>
import {
  AddDataAPI,
  GetListAPI,
  EditDataAPI,
  GetViewAPI,
  DelDataAPI,
} from "@/api/shopInspection/environment";
import SubmitForm from "./submitForm.vue";
const { proxy } = getCurrentInstance();

/**
 * 字典查询
 */
const { inspection_category, environment_check, security_check } =
  proxy.useDict("inspection_category", "environment_check", "security_check");

/**
 * 模糊查询枚举
 */
const selectList = ref([
  { type: "时间选择" },

  {
    label: "自查类别",
    model: "selfCheckCategory",
    type: "下拉单选",
    opt: inspection_category,
  },
  {
    label: "部门",
    model: "deptId",
    type: "部门",
  },

  {
    label: "检查项目",
    model: "selfCheckCategory",
    type: "下拉单选",
    opt: inspection_category,
  },
]);
/**
 * 表单实例
 */
const ruleFormRef = ref(null);
/**
 * 表单
 */
const ruleForm = ref({});
/**
 * 表格枚举
 */
const columns = ref([
  { label: "自查类别", prop: "selfCheckCategory", width: "120" },
  { label: "部门", prop: "deptName", width: "120" },
  { label: "检查项目", prop: "itemType", width: "120" },
  { label: "检查标准", prop: "inspectionStandard", width: "auto" },
  { label: "备注", prop: "remark", width: "120" },
  { label: "创建时间", prop: "createTime", width: "150" },
  { label: "操作", prop: "x" },
]);

/**
 * 树结构
 */
const dataTree = ref([]);
/**
 * 树结构枚举
 */
const defaultProps = {
  children: "children",
  label: "categoryName",
  value: "id",
};
/**
 * 按钮枚举
 */
const buttonList = ref([
  { type: "add", hasPermi: "mold:edger:add" },
  // { type: "import", hasPermi: "mold:edger:import" },
  // { type: "export", hasPermi: "mold:edger:export" },
]);

/**
 * 表格数据
 */
const tableData = ref([]);

/**
 * 表单实例
 */
const submitFormRef = ref(null);

/**
 * 一级类别列表
 */
const categoryList = ref([]);
/**
 * 新增修改表单
 */
const submitForm = ref({});

/**
 * 查询表单
 */
const query = reactive({
  pageNum: 1,
  pageSize: 10,
});

/**
 * 表单校验
 */
const rules = reactive({
  categoryName: [
    { required: true, message: "请填写类别名称", trigger: "change" },
  ],
});
/**
 * 各种状态
 */
const state = reactive({
  loading: false,
  total: 0,
  btnLoading: false,
  isShow: false,
  title: "新增",
  row: [],
  ids: [],
  treeShow: false, //树结构弹窗
});

/**
 * 新增弹窗
 */
const addDic = () => {
  state.title = "新增";
  state.isShow = true;
};

/**
 * 修改弹窗
 */
const editDic = async (id) => {
  try {
    state.btnLoading = true;
    const { data: result } = await GetViewAPI(id);
    submitForm.value = result;
    state.title = "修改";
    state.isShow = true;
  } catch (err) {
    console.error(err);
  } finally {
    state.btnLoading = false;
  }
};

/**
 * 查看弹窗
 */
const lookDic = async (id) => {
  try {
    state.btnLoading = true;
    const { data: result } = await GetViewAPI(id);
    submitForm.value = result;
    state.title = "查看";
    state.isShow = true;
  } catch (err) {
    console.error(err);
  } finally {
    state.btnLoading = false;
  }
};

/**
 * 弹窗关闭
 */
const closeDic = () => {
  state.isShow = false;
  state.treeShow = false;
  submitForm.value = {};
  ruleForm.value = {};
};

/**
 * 新增
 */
const addSub = async () => {
  try {
    state.btnLoading = true;
    const result = await submitFormRef.value.submit();
    await AddDataAPI(result);
    closeDic();
    proxy.successMsg("新增成功");
    getList();
  } catch (err) {
    console.error(err);
  } finally {
    state.btnLoading = false;
  }
};

/**
 * 修改
 */
const editSub = async () => {
  try {
    state.btnLoading = true;
    const result = await submitFormRef.value.submit();
    await EditDataAPI(result);
    closeDic();
    proxy.successMsg("修改成功");
    getList();
  } catch (err) {
    console.error(err);
  } finally {
    state.btnLoading = false;
  }
};

/**
 * 删除
 */
const remove = async (id) => {
  try {
    proxy.loading("删除中，请稍后");
    await DelDataAPI(id);
    closeDic();
    proxy.successMsg("删除成功");
    getList();
  } catch (err) {
    console.error(err);
  } finally {
    proxy.closeLoading();
  }
};

/**
 * 模糊查询
 */
const selectSubmit = (val) => {
  Object.keys(val).forEach((keyItem) => (query[keyItem] = val[keyItem]));
  query.startTime = query.beginTime;
  getList();
};

/**
 * 列表复选框
 */
const handleSelectionChange = ({ row, ids }) => {
  state.ids = ids;
  state.row = row;
};

/**
 * 删除列表
 */
const delTree = async (v) => {
  try {
    const isif = await proxy.MessageBox("是否删除？");
    if (!isif) return;
    proxy.loading("删除中，请稍后");
    await DelCategoryAPI(v.id);
    closeDic();
    proxy.successMsg("删除成功");
    getTreeList();
  } catch (err) {
    console.error(err);
  } finally {
    proxy.closeLoading();
  }
};

/**
 * 查询列表
 */
const getList = async () => {
  try {
    state.loading = true;
    const { data: result } = await GetListAPI(query);
    state.total = result.total;
    tableData.value = result.result;
  } catch (err) {
    console.error(err);
  } finally {
    state.loading = false;
  }
};

/**
 * 重置
 */
const close = () => {
  submitForm.value = {};
};
getList();
</script>

<template>
  <div class="app-container">
    <!-- 查询条件组件 -->
    <p-select-form :selectForm="selectList" @selectSubmit="selectSubmit" />

    <el-card>
      <p-button
        :list="buttonList"
        @add="addDic"
        @import="getList"
        :url="'/system/mould/mouldTypeExportError'"
        :templateUrl="'/system/mould/download/excel'"
        :importUrl="'/system/mould/importData'"
      />
      <!-- 表格数据 -->
      <p-table
        class="tableClass"
        :loading="state.loading"
        :data="tableData"
        :column="columns"
        v-model:page="query.pageNum"
        v-model:limit="query.pageSize"
        :total="state.total"
        @change="handleSelectionChange"
        @pagination="getList"
      >
        <template #columnCell="{ column, record }">
          <p-operate
            :list="[
              {
                icon: 'Edit',
                emit: 'edit',
                disabled: false,
                text: '修改',
                type: 'primary',
                hasPermi: 'mold:edger:edit',
              },
              {
                icon: 'DeleteFilled',
                emit: 'remove',
                disabled: false,
                text: '删除',
                isDel: true,
                type: 'danger',
                hasPermi: 'mold:edger:remove',
              },
              {
                icon: 'Search',
                emit: 'look',
                disabled: false,
                text: '查看',
                type: 'primary',
                hasPermi: 'mold:edger:query',
              },
            ]"
            v-if="column.prop == 'x'"
            @look="lookDic(record.id)"
            @edit="editDic(record.id)"
            @remove="remove(record.id)"
          />
        </template>
      </p-table>
    </el-card>

    <!-- 弹窗 新增-修改 -->
    <p-dialog
      v-model="state.isShow"
      :title="state.title"
      @ok="state.title == '新增' ? addSub() : editSub()"
      @close="close"
      width="60%"
    >
      <SubmitForm
        ref="submitFormRef"
        :data="submitForm"
        :disabled="state.title == '查看'"
      />
    </p-dialog>
    <!-- 树结构类别 -->
    <p-dialog
      v-model="state.treeShow"
      :title="state.title"
      @ok="state.title == '新增' ? addTreeSub() : editTreeSub()"
      @close="closeDic"
      width="30%"
    >
      <el-form
        :model="ruleForm"
        label-width="120px"
        :rules="rules"
        status-icon
        inline
        ref="ruleFormRef"
      >
        <el-form-item label="类型名称" prop="categoryName">
          <el-input clearable v-model="ruleForm.categoryName" />
        </el-form-item>
        <el-form-item label="模具类型">
          <p-select
            :option="categoryList"
            v-model="ruleForm.parentId"
            placeholder="请选择模具类型"
          />
        </el-form-item>
      </el-form>
    </p-dialog>
  </div>
</template>

<style scoped lang="scss">
.card-tree {
  height: 52.5rem;
  overflow: auto;
}

.card-header {
  display: flex;
  justify-content: space-between;
}
</style>